<template>
    <div class="tree-view">
        <div id="areaNode"></div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    import G6 from '@antv/g6'

    export default {
        name: 'areaTreeView',
        components: {},
        data () {
            return {
                areaTree: [],
                graph: null
            }
        },
        mounted () {
            this.init()
            this.action(this.treeAction(), data => {
                let tree = data.data
                this.rename(tree)
                this.areaTree = tree
                this.create()
            })
        },
        methods: {
            ...mapActions('area', {
                treeAction: 'tree'
            }),
            reload () {
                this.action(this.treeAction(), data => {
                    let tree = data.data
                    this.rename(tree)
                    this.areaTree = tree
                    this.create()
                })
            },
            rename (node) {
                if (node) {
                    if (node.childAreaRelyTreeVOS) {
                        node.children = node.childAreaRelyTreeVOS
                        delete node.childAreaRelyTreeVOS
                        node.children.forEach(child => {
                            this.rename(child)
                        })
                    }
                    delete node.childAreaRelyTreeVOS
                }
            },
            init () {
                this.graph = new G6.TreeGraph({
                    container: 'areaNode',
                    width: 1000,
                    height: 500,
                    pixelRatio: 2,
                    modes: {
                        default: [{
                            type: 'collapse-expand',
                            onChange: (item, collapsed) => {
                                let data = item.getModel()
                                data.collapsed = collapsed
                                return true
                            }
                        }, 'drag-canvas', 'zoom-canvas']
                    },
                    defaultNode: {
                        size: 16,
                        anchorPoints: [[0, 0.5], [1, 0.5]],
                    },
                    defaultEdge: {
                        shape: 'cubic-horizontal'
                    },
                    nodeStyle: {
                        default: {
                            fill: '#64bfff',
                            stroke: '#0062d9'
                        }
                    },
                    edgeStyle: {
                        default: {
                            stroke: '#93a2bf'
                        }
                    },
                    layout: {
                        type: 'dendrogram',
                        direction: 'LR',
                        nodeSep: 20,
                        rankSep: 100
                    }
                })
            },
            create () {
                this.graph.data(this.areaTree)
                this.graph.render()
                this.graph.getNodes().forEach(node => {
                    let model = node.getModel()
                    model.label = model.name
                    model.labelCfg = {
                        offset: 10,
                        style: {
                            fill: '#727272'
                        }
                    }
                    if (model.children && model.children.length > 0) {
                        model.labelCfg.position = 'left'
                    } else {
                        model.labelCfg.position = 'right'
                    }
                })
                this.graph.fitView()
                this.graph.refresh()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tree-view {
        width: 100%;
        height: 480px;
    }
</style>
